<div class="layui-form-item">
    <label class="layui-form-label">分类名称</label>
    <div class="layui-input-inline" style="width:300px;">
        <input type="text" name="title" value="<?=$data['test_sticker_type_name']?>" placeholder="请输入分类名称" class="layui-input title">
    </div>
</div>
<!--<div class="layui-form-item">-->
<!--    <label class="layui-form-label">分类图标</label>-->
<!--    <div class="layui-input-block">-->
<!--        <button type="button" class="layui-btn" id="test1">-->
<!--            <i class="layui-icon">&#xe67c;</i>上传图标-->
<!--        </button>-->
<!--        <input type="text" name="" class="wenzi1" style="width:400px;height:35px;margin-left:20px;display:none;">-->
<!--        <span class="up1" style="width:300px;height:35px;margin-left:20px;display:none;color:red;"></span>-->
<!--        <input type="hidden" value="--><?//=$data['test_select_icon']?><!--" class="icon1">-->
<!--        <br><br>-->
<!--        <div style="border:1px solid gainsboro;width:100px;height: 100px;">-->
<!--            <img src="--><?//=$data['test_select_icon']?><!--" class="test1" style="height:100px;width:100px;">-->
<!--        </div>-->
<!--    </div>-->
<!--</div>-->
<!--<div class="layui-form-item">-->
<!--    <label class="layui-form-label">分类未选中图标</label>-->
<!--    <div class="layui-input-block">-->
<!--        <button type="button" class="layui-btn" id="test2">-->
<!--            <i class="layui-icon">&#xe67c;</i>上传图标-->
<!--        </button>-->
<!--        <input type="text" name="" class="wenzi2" style="width:400px;height:35px;margin-left:20px;display:none;">-->
<!--        <span class="up2" style="width:300px;height:35px;margin-left:20px;display:none;color:red;"></span>-->
<!--        <input type="hidden" value="--><?//=$data['test_no_select_icon']?><!--" class="icon2">-->
<!--        <br><br>-->
<!--        <div style="border:1px solid gainsboro;width:100px;height: 100px;">-->
<!--            <img src="--><?//=$data['test_no_select_icon']?><!--" class="test2" style="height:100px;width:100px;">-->
<!--        </div>-->
<!--    </div>-->
<!--</div>-->

<table class="layui-table table">
    <colgroup>
        <col width="15%">
        <col width="20%">
        <col width="30%">
        <col width="15%">
    </colgroup>
    <thead>
    <tr>
        <th>图标icon</th>
        <th>素材</th>
        <th>名称</th>
        <th>操作</th>
    </tr>
    </thead>
    <tbody class="body">
    <?php if(!empty($sticker)){
        foreach($sticker as $k=>$v){
            $length=count($sticker);//统计这个数组有多少个
            ?>
            <tr>
                <td>
                    <div>
                        <div style="width:65px;height:65px;border:1px solid gainsboro;float: left;margin-right:10px;">
                            <img src="<?=$v['icon']?>" style="width:65px;height:65px;" class="tt<?=$k?>">
                        </div>
                        <input type="hidden" value="<?=$v['icon']?>" class="ttt<?=$k?>">
                        <button class="layui-btn layui-btn-xs t<?=$k?>" style="margin-left:10px;margin-top:25px;" id="t<?=$k?>">上传图片</button>
                    </div>
                </td>
                <td>
                    <div>
                        <div style="width:65px;height:65px;border:1px solid gainsboro;float: left;margin-right:10px;">
                            <img src="<?=$v['pics']?>" style="width:65px;height:65px;" class="yy<?=$k?>">
                        </div>
                        <input type="hidden" value="<?=$v['pics']?>" class="yyy<?=$k?>">
                        <button class="layui-btn layui-btn-xs y<?=$k?>" style="margin-left:10px;margin-top:25px;" id="y<?=$k?>">上传图片</button>
                    </div>
                </td>
                <td>
                    <input type="text" name="" value="<?=$v['sticker_name']?>" class="sticker_name<?=$k?>" style="width:200px;height:28px;">
                </td>
                <td>
                    <button class="layui-btn layui-btn-xs sticker_add<?=$k?>">保存</button>
                    <?php if($v['del4']==2){ ?>
                        <button class="layui-btn layui-btn-xs layui-btn-danger sticker_stop<?=$k?>">停用</button>
                    <?php }else if($v['del4']==1){ ?>
                        <button class="layui-btn layui-btn-xs layui-btn-normal sticker_start<?=$k?>">启用</button>
                    <?php } ?>
                    <button class="layui-btn layui-btn-xs layui-btn-warm sticker_up<?=$k?>">上移</button>
                    <button class="layui-btn layui-btn-xs layui-btn-warm sticker_down<?=$k?>">下移</button>
                    <input type="hidden" value="<?=$v['id']?>" class="sticker_id<?=$k?>">
                </td>
            </tr>
            <?php if($k==0){ ?>
                <input type="hidden" name="" value="<?=$sticker[0]['id']?>" class="start<?=$k;?>">
            <?php }else{ ?>
                <input type="hidden" name="" value="<?=$sticker[$k-1]['id']?>" class="start<?=$k;?>">
            <?php } ?>
            <?php if($k==$length-1){ ?>
                <input type="hidden" name="" value="<?=$sticker[$length-1]['id']?>" class="end<?=$k;?>">
            <?php }else{ ?>
                <input type="hidden" name="" value="<?=$sticker[$k+1]['id']?>" class="end<?=$k;?>">
            <?php } ?>
        <?php }} ?>
    </tbody>
</table>

<div class="layui-form-item">
    <label class="layui-form-label"></label>
    <div class="layui-input-block">
        <input type="hidden" value="<?=$data['id']?>" class="ids">
        <button class="layui-btn layui-btn-normal add">新增素材</button>
        <button class="layui-btn save">保存</button>
        <button class="layui-btn back">返回</button>
    </div>
</div>


<script>
    //新增贴纸,新增贴纸上传，新增贴纸保存
    $('.add').click(function(){
        if($(".add_tr").length > 0) {
            layer.msg("请先保存当前新增素材",{time:2000});
            return false;
        }
        var html="";
        html+="<tr class=\"add_tr\">";
        html+="<td><button type=\"button\" class=\"layui-btn layui-btn-xs\" style=\"margin-bottom:10px;\" id=\"test3\"> <i class=\"layui-icon\">&#xe67c;</i>上传icon </button>" +
            "<div style=\"width:80px;height:80px;border:1px solid lightgray;\"><img src=\"\" style=\"width:80px;height:80px;\" class=\"test3\"></div>" +
            "<input type=\"hidden\" name='' value=\"\" class=\"icon3\">" +
            "</td>";
        html+="<td><button type=\"button\" class=\"layui-btn layui-btn-xs\" style=\"margin-bottom:10px;\" id=\"test4\"> <i class=\"layui-icon\">&#xe67c;</i>上传图片 </button>" +
            "<div style=\"width:80px;height:80px;border:1px solid lightgray;\"><img src=\"\" style=\"width:80px;height:80px;\" class=\"test4\"></div>" +
            "<input type=\"hidden\" name='' value=\"\" class=\"icon4\">" +
            "</td>";
        html+="<td>名称" +
            "<input type=\"text\" name='' value=\"\" class=\"sticker_title\" style=\"width:210px;\">" +
            "</td>";
        html+="<td><button type=\"button\" class=\"layui-btn layui-btn-xs add_sticker\" style=\"margin-bottom:10px;\">保存</button></td>";
        html+="</tr>";
        $('.body').append(html)
        //图片上传
        layui.use('upload', function() {
            var upload = layui.upload;
            //图标icon
            var uploadInst = upload.render({
                elem: '#test3' //绑定元素
                , url: "<?=base_url("common/upload/normal_upload")?>" //上传接口
                , data: {type: "image"}
                , acceptMime: 'image/*'
                ,size:"1024"
                , done: function (res) {
                    if (res.code == 0) {
                        $('.icon3').val(res.data.file_url);
                        $('.test3').attr("src", res.data.file_url);
                        layer.msg(res.msg, {time: 2000});
                    } else {
                        layer.msg(res.msg, {time: 2000});
                    }
                }
            });
            //图标素材
            var uploadInst = upload.render({
                elem: '#test4' //绑定元素
                ,url: "<?=base_url("common/upload/normal_upload")?>" //上传接口
                , data: {type: "image"}
                ,acceptMime: 'image/*'
                ,size:"1024"
                , done: function (res) {
                    if (res.code == 0) {
                        $('.icon4').val(res.data.file_url);
                        $('.test4').attr("src",res.data.file_url);
                        layer.msg(res.msg, {time: 2000});
                    }else{
                        layer.msg(res.msg, {time: 2000});
                    }
                }
            });

        })
        //贴纸保存
        $(".add_sticker").click(function() {
            var sticker_title = $('.sticker_title').val();
            var icon3 = $('.icon3').val();
            var icon4 = $('.icon4').val();
            var ids = $('.ids').val();
            var a = [sticker_title, icon3, icon4, ids]
            $.ajax({
                type: "post",
                data: {title:sticker_title,icon3:icon3,icon4:icon4,id:ids},
                dataType: "json",
                url: "<?=base_url("no_edit/sticker/add_sticker")?>",
                success: function (res) {
                    if(res.code==0){
//                        create_table(res.data)
                        layer.msg(res.msg, {time: 2000},function(){
                            window.location.reload();
                        });
                    }else{
                        layer.msg(res.msg, {time: 2000});
                    }
                }
            })
        })
    })

    //贴纸分类保存
    $('.save').click(function(){
        var title=$('.title').val();
        var icon1=$('.icon1').val();
        var icon2=$('.icon2').val();
        var ids=$('.ids').val();
        var a=[title,icon1,icon2]
        $.ajax({
            type: "post",
            data: {title:title,icon1:icon1,icon2:icon2,id:ids},
            dataType: "json",
            url: "<?=base_url("no_edit/sticker/save_edit")?>",
            success: function (res) {
                if(res.code==0){
                    layer.msg(res.msg, {time: 2000},function(){
                        window.location.href="<?=base_url("no_edit/sticker/index")?>"
                    });
                }else{
                    layer.msg(res.msg, {time: 2000});
                }
            }
        })
    })

    $(function(){
        //文件上传
        layui.use('upload', function(){
            var upload = layui.upload;

            //上传图标
            var uploadInst = upload.render({
                elem: '#test1' //绑定元素
                ,url: "<?=base_url("common/upload/normal_upload")?>" //上传接口
                , data: {type: "image"}
                ,acceptMime: 'image/*'
                ,size:"1024"
                , before: function () {
                    $(".up1").text("上传中。。。请等待");
                    $(".up1").show()
                }
                , done: function (res) {
                    if (res.code == 0) {
                        $('.up1').hide();
                        $('.icon1').val(res.data.file_url);
                        $('.wenzi1').val(res.data.file_url);
                        $('.wenzi1').show();
                        $('.test1').attr("src",res.data.file_url);
                        layer.msg(res.msg, {time: 2000});
                    }else{
                        layer.msg(res.msg, {time: 2000});
                    }
                }
            });
            //上传未选中图标
            var uploadInst = upload.render({
                elem: '#test2' //绑定元素
                ,url: "<?=base_url("common/upload/normal_upload")?>" //上传接口
                , data: {type: "image"}
                ,acceptMime: 'image/*'
                ,size:"1024"
                , before: function () {
                    $(".up2").text("上传中。。。请等待");
                    $(".up2").show()
                }
                , done: function (res) {
                    if (res.code == 0) {
                        $('.up2').hide();
                        $('.icon2').val(res.data.file_url);
                        $('.wenzi2').val(res.data.file_url);
                        $('.wenzi2').show();
                        $('.test2').attr("src",res.data.file_url);
                        layer.msg(res.msg, {time: 2000});
                    }else{
                        layer.msg(res.msg, {time: 2000});
                    }
                }
            });
        });
        //返回
        $(".back").click(function(){
            history.go(-1)
        })

        //定义一个50的jquery数组
        var arr=[];
        for(var i=0;i<51;i++){
            arr.push(i)
        }
        $.each(arr,function(i,n){
            //贴纸保存
            $(".sticker_add"+n).click(function(){
                var sticker_id=$(".sticker_id"+n).val();
                var icon=$(".ttt"+n).val();
                var pics=$(".yyy"+n).val();
                var sticker_name=$(".sticker_name"+n).val();
//                var a=[sticker_id,icon,pics,sticker_name]
                $.ajax({
                    type: "post",
                    data: {sticker_id:sticker_id,icon:icon,pics:pics,sticker_name:sticker_name},
                    dataType: "json",
                    url: "<?=base_url("no_edit/sticker/sticker_add")?>",
                    success: function (res) {
                        if(res.code==0){
                            layer.msg(res.msg, {time: 2000},function(){
                                window.location.reload()
                            });
                        }else{
                            layer.msg(res.msg, {time: 2000});
                        }
                    }
                })
            })

            //贴纸停用
            $(".sticker_stop"+n).click(function(){
                var sticker_id=$(".sticker_id"+n).val();
                $.ajax({
                    type: "post",
                    data: {sticker_id:sticker_id},
                    dataType: "json",
                    url: "<?=base_url("no_edit/sticker/sticker_stop")?>",
                    success: function (res) {
                        if(res.code==0){
                            layer.msg(res.msg, {time: 2000},function(){
                                window.location.reload()
                            });
                        }else{
                            layer.msg(res.msg, {time: 2000});
                        }
                    }
                })
            })

            //贴纸启用
            $(".sticker_start"+n).click(function(){
                var sticker_id=$(".sticker_id"+n).val();
                $.ajax({
                    type: "post",
                    data: {sticker_id:sticker_id},
                    dataType: "json",
                    url: "<?=base_url("no_edit/sticker/sticker_start")?>",
                    success: function (res) {
                        if(res.code==0){
                            layer.msg(res.msg, {time: 2000},function(){
                                window.location.reload()
                            });
                        }else{
                            layer.msg(res.msg, {time: 2000});
                        }
                    }
                })
            })

            //贴纸上移
            $(".sticker_up"+n).click(function(){
                var sticker_id=$(".sticker_id"+n).val();
                var start=$('.start'+n).val();
                var end=$('.end'+n).val();
                if(start==sticker_id){
                    layer.msg("当前已为第一个")
                    return false;
                }else{
                    $.ajax({
                        type: "post",
                        data: {sticker_id:sticker_id,start:start,end:end},
                        dataType: "json",
                        url: "<?=base_url("no_edit/sticker/sticker_up")?>",
                        success: function (res) {
                            if(res.code==0){
                                layer.msg(res.msg, {time: 2000},function(){
                                    window.location.reload()
                                });
                            }else{
                                layer.msg(res.msg, {time: 2000});
                            }
                        }
                    })
                }
            })

            //贴纸下移
            $(".sticker_down"+n).click(function(){
                var sticker_id=$(".sticker_id"+n).val();
                var start=$('.start'+n).val();
                var end=$('.end'+n).val();
                if(end==sticker_id){
                    layer.msg("当前已为最后一个")
                    return false;
                }else{
                    $.ajax({
                        type: "post",
                        data: {sticker_id:sticker_id,start:start,end:end},
                        dataType: "json",
                        url: "<?=base_url("no_edit/sticker/sticker_down")?>",
                        success: function (res) {
                            if(res.code==0){
                                layer.msg(res.msg, {time: 2000},function(){
                                    window.location.reload()
                                });
                            }else{
                                layer.msg(res.msg, {time: 2000});
                            }
                        }
                    })
                }
            })



            //贴纸上传图片
            var t="#t"+n;
            var y="#y"+n;
            layui.use('upload', function() {
                var upload = layui.upload;
                var uploadInst=upload.render({
                    elem: t //绑定元素
                    , url: "<?=base_url("common/upload/normal_upload")?>" //上传接口
                    , data: {type: "image"}
                    , acceptMime: 'image/*'
                    ,size:"1024"
                    , done: function (res) {
                        if (res.code == 0) {
                            $('.ttt'+n).val(res.data.file_url);
                            $('.tt'+n).attr("src", res.data.file_url);
                            layer.msg(res.msg, {time: 2000});
                        } else {
                            layer.msg(res.msg, {time: 2000});
                        }
                    }
                });

                //
                var uploadInst=upload.render({
                    elem: y //绑定元素
                    , url: "<?=base_url("common/upload/normal_upload")?>" //上传接口
                    , data: {type: "image"}
                    , acceptMime: 'image/*'
                    ,size:"1024"
                    , done: function (res) {
                        if (res.code == 0) {
                            $('.yyy'+n).val(res.data.file_url);
                            $('.yy'+n).attr("src", res.data.file_url);
                            layer.msg(res.msg, {time: 2000});
                        } else {
                            layer.msg(res.msg, {time: 2000});
                        }
                    }
                });
            })
        })
    })


</script>
